{include file="public/header-static"/}
{include file="public/sidebar"/}
<div id="main">
    {include file="public/header"/}
    <style>
        .datas {
            /*text-align: center;*/
        }

        .d-fix {
            display: flex;
        }
    </style>
    <div class="main-content">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="row">

                        <div class="col-md-4">
                            <div class="card bor" style="height: calc( 100% - 15px);">
                                <div class="card-dth">
                                    <div class="user-name">
                                        用户总数据
                                    </div>
                                    <div class="d-cnter">
                                        <canvas id="xuqiu" width="188" height="178"></canvas>
                                    </div>
                                    <div class="d-fix">
                                        <div class="d-left">
                                            <div class="dleft">{$countTourist}</div>
                                            <div class="bg-txt ">
                                                <text class="kuai y"></text>
                                                <text class="str">游客</text>
                                            </div>
                                        </div>
                                        <div class="d-rigth">
                                            <div class="dleft">{$countUsersMember}</div>
                                            <div class="bg-txt ">
                                                <text class="kuai v"></text>
                                                <text class="str">VIP用户</text>
                                            </div>
                                        </div>
                                        <div class="d-left">
                                            <div class="dleft">{$todayUsers}</div>
                                            <div class="bg-txt ">
                                                <text class="kuai y" style="background:#5bff86"></text>
                                                <text class="str">今日新增</text>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="height: calc( 100% - 15px);">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">访问数据</div>
                                    </div>
                                    <div class="u-rig">
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="j"></text>
                                                <text class="str">今日访问</text>
                                            </div>
                                            <div class="bg-str">
                                                {$countUsersAccessToday}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="bz"></text>
                                                <text class="str">本周访问</text>
                                            </div>
                                            <div class="bg-str">
                                                {$countUsersAccessWeek}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="dy"></text>
                                                <text class="str">当月访问</text>
                                            </div>
                                            <div class="bg-str">
                                                {$countUsersAccessMonth}
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="jn"></text>
                                                <text class="str">年访问</text>
                                            </div>
                                            <div class="bg-str">
                                                {$countUsersAccessYear}
                                            </div>
                                        </div>
                                    </div>
                                    <div class="txt-cen">
                                        <canvas id="post" height="120"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="col-md-4">
                            <div class="card bor" style="height: calc( 100% - 15px);">
                                <div class="card-dth">
                                    <div class="user">
                                        <div class="user-name">分享数据</div>
                                    </div>
                                    <div class="u-rig">
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="j"></text>
                                                <text class="str">今日分享</text>
                                            </div>
                                            <div class="bg-str">
                                                100
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="bz"></text>
                                                <text class="str">本周分享</text>
                                            </div>
                                            <div class="bg-str">
                                                200
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="dy"></text>
                                                <text class="str">当月分享</text>
                                            </div>
                                            <div class="bg-str">
                                                200
                                            </div>
                                        </div>
                                        <div class="u-left">
                                            <div class="bg-txt">
                                                <text class="jn"></text>
                                                <text class="str">年分享</text>
                                            </div>
                                            <div class="bg-str">
                                                200
                                            </div>
                                        </div>
                                    </div>
                                    <div class="txt-cen">
                                        <canvas id="post1" height="120"></canvas>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
            </div>

            <div class="list">
<!--                <div class="uname">用户列表</div>-->
                <div class="app-block">
                    <div class="app-content">
                        <div class="app-action">

                            <select class="form-control _custom" id="role" aria-required="true">
                                <option value="-1">角色</option>
                                <option value="0">游客</option>
                                <option value="1">年VIP</option>
                                <option value="2">日VIP</option>
                                <option value="3">月VIP</option>
                            </select>

                            <select class="form-control _custom selecttom" id="identity_id" aria-required="true">
                                <option value="-1">身份</option>
                                {volist name="identityList" id="val"}
                                <option value="{$val.id}">{$val.name}</option>
                                {/volist}
                            </select>

                            <select class="form-control _custom selecttom" id="associate" aria-required="true">
                                <option value="-1">来源</option>
                                <option value="1">公众号</option>
                                <option value="2">小程序</option>
                            </select>

                            <select class="form-control _custom selecttom" id="state" aria-required="true">
                                <option value="-1">状态</option>
                                <option value="1">正常</option>
                                <option value="0">禁用</option>
                            </select>

                            <div class="action-right" style="margin-left: 0.5rem;">
                                <a href="#" class="app-sidebar-menu-button btn btn-outline-light">
                                    <i data-feather="menu"></i>
                                </a>
                                <div class="input-group">
                                    <input type="text" name="keywords" id="keywords" autofocus="autofocus"
                                           value="{$Request.get.keywords}" class="form-control"
                                           placeholder="昵称|地区"
                                           aria-describedby="button-addon1">
                                    <div class="input-group-append">
                                        <button class="btn btn-outline-light" type="submit" id="button-addon1">
                                            <i data-feather="search"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <div class="card">
                                    <table id="linkstable" lay-filter="linkstable"></table>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {include file="public/footer"/}
</div>
<script src="__STATIC__/vendors/charts/chartjs/chart.min.js"></script>
<script src="__STATIC__/vendors/charts/apex/apexcharts.min.js"></script>
<script src="__STATIC__/vendors/circle-progress/circle-progress.min.js"></script>
<script src="__STATIC__/assets/js/examples/dashboard.js"></script>
<script src="__STATIC__/assets/js/examples/echarts.js"></script>
<script src="__STATIC__/assets/js/custom.js"></script>
<script type="text/html" id="switchTpl">
    <input type="checkbox" name="state" value="{{d.id}}" lay-skin="switch" lay-text="正常|禁用" lay-filter="switch_state" {{
           d.state== 1 ? 'checked' : '' }}>
</script>

<script type="text/html" id="barDemo">
    <button lay-event="upgrade" onclick="upgrade({{d.id}})" class="btn btn-sm btn-outline-secondary">升级会员</button>
</script>
<script>
    function upgrade(id) {
        layer.prompt({title: '请填写新增天数', formType: 3}, function (text, index) {
            if (text <= 0) {
                return false;
            }
            $.post("{:url('/users/upGradeMember')}", {'id': id, 'day': text}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                } else {
                    window.location.reload();
                }
            });

            layer.close(index);
        })
    }

    // layui插件
    layui.use('table', function () {
        var table = layui.table
            , form = layui.form;
        // 表格初始化
        table.render({
            elem: '#linkstable'
            , skin: 'line' //行边框风格
            , even: true //开启隔行背景
            , url: '{:url("/users/index")}'
            , method: 'post'
            , page: true //开启分页
            , cols: [[
                 {field: 'nickname_data', title: '头像/昵称'}
                , {field: 'ids', title: '序号/社群IDS'}
                , {field: 'identity_data', title: '身份/城市'}
                , {field: 'user_type', title: '角色/来源'}
                , {field: 'state', title: '状态', templet: '#switchTpl'}
                , {field: 'access_data', title: '访问/分享'}
                , {field: 'date', title: '首次访问/到期时间'}
                , {field: 'rightbtn', title: '操作', align: 'center', toolbar: '#barDemo'}
            ]],
            done: function (res) {
                var element = $('td[data-field="rightbtn"]').children('.layui-table-cell');
                element.css('overflow', 'visible');
                element.children('.dropdown-menu').css('min-width', 'auto');
            },
            parseData: function (res) {
                return {
                    "code": res.code,
                    "msg": res.msg,
                    "count": res.data.count,
                    "data": res.data.list
                };
            }
        });

        // 搜索
        $('#button-addon1').on('click', function () {
            var keywords = $("#keywords").val();
            var associate = $("#associate option:selected").val();
            var state = $("#state option:selected").val();
            var role = $("#role option:selected").val();
            var identity_id = $("#identity_id option:selected").val();
            table.reload('linkstable', {
                url: '{:url("/users/index")}'
                , where: {
                    keywords: keywords, associate: associate, state: state, role: role, identity_id: identity_id // 搜索参数
                }
                , page: {
                    curr: 1 //重新从第 1 页开始
                }
            });
        });

        form.on('switch(switch_state)', function (obj) {
            $.post("{:url('/users/changeStatus')}", {id: obj.value, field: 'state'}, function (res) {
                if (res['code'] != 1) {
                    toastr.error(res['msg']);
                }
            });
        });


    });

    var chartDom = document.getElementById('xuqiu');
    var myChart = echarts.init(chartDom);
    var option = {
        title: '',
        color: ['#F25021', '#5B78FF', '#5bff86'],  //手动设置每个图例的颜色
        //环形中间文字
        graphic: [
            //第一行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '40%',
                style: {
                    //value当前进度
                    text: "{$countUsers}",
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 22,
                    fontWeight: 'bold'
                }
            },
            //第二行文字
            //内容 + 位置
            {
                type: 'text',
                left: 'center',
                top: '56%',
                style: {
                    //maxValue进度条最大值
                    text: '用户总数',
                    textAlign: 'center',
                    fill: '#19191A',
                    fontSize: 12
                }
            }
        ],
        series: [ //系列列表
            {
                name: '设备状态',  //系列名称
                type: 'pie',   //类型 pie表示饼图
                radius: ['70%', '90%'],  //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形
                itemStyle: {  //图形样式
                    normal: { //normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
                        label: {  //饼图图形上的文本标签
                            show: false  //平常不显示
                        },
                        labelLine: {     //标签的视觉引导线样式
                            show: false  //平常不显示
                        }
                    },
                },
                data: [
                    {value: "{$countUsersMember}"},
                    {value: "{$countTourist}"},
                    {value: "{$todayUsers}"},
                ]
            }
        ]
    };
    myChart.setOption(option);

    let usersLabels = "{$usersAccessWeekLine['labels']}";
    let usersData = "{$usersAccessWeekLine['datas']}";
    var ctx = document.getElementById("post")
    var data = {
        labels: usersLabels.split(','),
        datasets: [
            {
                label: '',
                backgroundColor: '#F2FBFF',
                borderColor: "#36A2EB", //路径颜色
                pointBackgroundColor: "#406CE5", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data: usersData.split(','),
                borderWidth: '2',
                pointRadius: 0

            },

        ],

    }
    new Chart(ctx, {
        type: 'line',
        data: data,
        options: {
            legend: {display: false},
            scales: {
                yAxes: [{
                    tension: 0,
                    max: 50,
                    // 负数处理
                    ticks: {
                        beginAtZero: true,
                        userCallback: function (label, index, labels) {
                            // when the floored value is the same as the value we have a whole number
                            if (Math.floor(label) === label) {
                                return label;
                            }
                        },
                    }
                }],
                xAxes: [
                    {
                        gridLines: {display: false}
                    }
                ]
            }
        }
    });


    var ctx1 = document.getElementById("post1")
    var data1 = {
        labels: ["1", "2", "3", "4", "5", "6", "7"],
        datasets: [
            {
                label: '',
                backgroundColor: '#F2FBFF',
                borderColor: "#36A2EB", //路径颜色
                pointBackgroundColor: "#406CE5", //数据点颜色
                pointBorderColor: "#fff", //数据点边框颜色
                data: [0, 15, 10, 35, 10, 0, 20],
                borderWidth: '2',
                pointRadius: 0

            },

        ],

    }
    new Chart(ctx1, {
        type: 'line',
        data: data1,
        options: {
            legend: {display: false},
            scales: {
                yAxes: [{
                    tension: 0,
                    max: 50
                }],
                xAxes: [
                    {
                        gridLines: {display: false}
                    }
                ]
            }
        }
    });

</script>
<style>
    .card-dth {
        padding: 8px;
    }

    .user-name {
        font-size: 16px;
        font-family: 'AliM';
        font-weight: 500;
        color: #0E1525;
        margin-left: 10px;
        text-align: center;
    }

    .d-cnter {
        text-align: center;
        margin-top: 15px;
    }

    .user {
        display: flex;
        justify-content: space-between;
    }

    .d-rigth {
        text-align: -webkit-center;
    }

    .user {
        width: 96%;
        margin: auto;
        color: #0E1525;

    }

    .bg-txt {
        display: flex;
        margin-top: 5px;
    }


    .str {
        font-size: 12px;
        margin-left: 3px;
        color: #999999;
    }


    .d-fix {
        display: flex;
        justify-content: space-between;
        padding-top: 10px;
        width: 70%;
        margin: auto;
        padding-bottom: 20px;
    }

    .rig-img img {
        width: 9rem;
        height: 9rem;
    }

    .kuai {
        width: 10px;
        height: 10px;
        margin-top: 3px;
        border-radius: 50px;
    }

    .y {
        background: #5B78FF;
    }

    .v {
        background: #F25021;
    }

    .dleft {
        font-size: 18px;
        font-family: 'AliM';
        text-align: center;
    }

    .j {
        background: #5B78FF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bz {
        background: #22b9ff;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .dy {
        background: #28a745;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .jn {
        background: #F74AFF;
        width: 10px;
        height: 10px;
        margin-top: 3px;
    }

    .bg-str {
        font-family: 'AliM';
        text-align: center;
    }

    .u-rig {
        display: flex;
        justify-content: space-between;
        width: 92%;
        margin: auto;
        padding-top: 10px;
        padding-bottom: 30px;
    }

    .txt-cen {
        text-align: center;
    }

    .list {
        background: white;
        /*height: 100vh;*/
        padding: 20px;
        border-radius: 5px;
    }

    .uname {
        font-size: 18px;
        font-family: 'AliM';
        margin-bottom: 15px;
    }
</style>
</body>
</html>
